<template>
    <div>
    <div id="head">
        <h1 style="font-size: 50px;color: white;position: absolute;top: 150px;left: 650px">购买超级会员</h1>
    </div>
    <el-row style="padding-left: 10vw">

        <el-col style="margin-left: 50px"  :span="9" v-for="(vipkind, index) in tableData">
            <el-card :body-style="{ padding: '20px' }" style="margin: 20px">
                <img v-if="vipkind.vipKindImg" :src="vipkind.vipKindImg" style="width: 25vw;height: 30vh" class="image">
                <el-image v-else class="image" style="width: 25vw;height: 30vh">
                    <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline">暂无图片</i>
                    </div>
                </el-image>
                <div style="padding: 14px;">
                    <h2>{{vipkind.vipKindName}}</h2>
                    <div class="bottom clearfix">
                        <span style="text-align: center">首充价格：{{vipkind.vipKindPrice}}</span>
                        <br><br>
                        <span style="text-align: center;margin-left: 25px">折扣率：{{vipkind.vipKindZhekoulv}}</span>
                        <el-popconfirm confirm-button-text='确认' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
                                       :title="'这个卡价格为：'+vipkind.vipKindPrice  +'  ,确认支付吗'" @confirm="buyvipcard(vipkind.vipKindId)">
                            <el-button type="text" slot="reference" style="font-size: 22px" class="button" >购买</el-button>
                        </el-popconfirm>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
    </div>
</template>

<script>
    import request from "@/request";

    export default {
        name: "BuyVip",
        data(){
        return{
            tableData:[],
        }
        },
        methods:{
            //页面加载
            load() {
                request.get('/vipkind/getall').then(res => {
                    console.log(res)
                    if (res.code === "200") {
                        this.tableData = res.data;
                    }
                })
            },
            buyvipcard(vipKindId){
                var userId=JSON.parse(window.localStorage.getItem('user')).userId
                console.log(userId);
                request.put("/vipcard/buyvipcard/" + vipKindId+"/"+userId).then(res =>{
                    if(res.code === "200"){
                        this.$notify.success('购买成功')
                    } else this.$message.error(res.msg)
                })
            }

        },
        mounted() {
            if (!(this.$store.state.islogin)) {
                this.$message.warning("清先登录")
                this.$router.push("/userlogin")
            }
            this.load()
        }

    }
</script>

<style scoped>
    #head {
        height: 350px;
        background-image: url("../../assets/aboutbackground.jpg");
        background-size: cover;
        background-repeat: no-repeat;
    }
    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 30vw;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>